Publishing your Animation Properties

Ok Now my firends it's not end, weʼve got the very basics of CSS animation down. That covers a lot of ground, but youʼll quickly find there are aspects of animation that youʼd like to have a little more control over, when you want to refine the motion and even save some time.

lets do it...

In this section we will look at how properties like animation-delay, animation-fill-mode and animation-direction can be very useful to us. We’ll use a slightly more complex animation of a rolling ball as the basis of our next few examples. I’ve created an animation that moves a ball both left and right in a few keyframes to demonstrate how these additional properties can come in handy.

The CSS for our initial example looks like this:

 .ball {
animation-name: ballmove;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
@keyframes ballmove {
0% {transform: translateX(100px) rotate(0);}
20% {transform: translateX(-10px) rotate(-0.5turn);}
100% {transform: translateX(450px) rotate(2turn);}
}

 animation-delay

In our initial example, the animation starts playing as soon as we load up our page. But what if we don’t want the animation to play right away? That’s where animation-delay comes in handy. Like animation-duration, animation-delay accepts values set in seconds (s) and milliseconds (ms). Let’s set an animation-delay of two seconds for our animation:

animation-delay: 2s;

Now we’ve got a nice pause before the action of our ball animation starts. You might have also noticed that our ball snaps back to the original position when the animation ends. That’s not the most ideal way to end an animation like this. If you’re animating an object moving across the screen, you’d probably like it to stay there. This is exactly one of the cases where the animation-fill-mode property can come in useful.

animation-fill-mode can take one of four values: none; backwards; forwards; or both. The default value is none if you don’t declare the property at all. In this example, we have keyframes moving the ball all the way to the right side of its container. But when the animation completes, the ball snaps back to its original position. That is the default animation-fill-mode of none in action. When the animation is over, the target of the animation returns to its initial styles.

animation-fill-mode: forwards

However, if we explicitly set the animation-fill-mode to forwards, after the animation has finished our ball will retain the styles from the last executed keyframe of the animation; in this case, the 100% keyframe which positions it over to the right. Let’s add one additional property to our .ball class:

animation-fill-mode: forwards;

 Now our ball stays at the end point of our animation even when the animation has completed, which makes much more sense. You can think of animation-fill-mode:forwards as a way to extend the styles from the last keyframe beyond the duration of an animation.

animation-fill-mode: backwards

A fill-mode of backwards often comes in handy when working with delayed animations. In our example, our animation has a delay of two seconds and then it moves the ball first to the left, then to the right. With no animation-fill-mode set, we see our ball jump sharply to the position of our 0% keyframe when the animation starts after the delay. It’s not as dramatically noticeable as when it snapped back at the end of the animation, but still, this doesn’t look good.

If we add an animation-fill-mode property set to backwards, our ball will take on the styles stated in our 0% keyframe during the animation-delay we’ve specified. You can think of it as extending the styles from our 0% keyframe out into the delay we’ve set.

animation-fill-mode: backwards;

body {margin:3em 10%; background:#333;}
        
.ball {                
  animation-name: ballmove;
    animation-duration: 2s;
    animation-iteration-count:1;
    animation-timing-function: ease-in-out;        
  animation-delay:2s;
    animation-fill-mode:forwards;                                        
}
            
@keyframes ballmove {
    0% {transform: translateX(0) rotate(0);}                
        20% {transform: translateX(-10px) rotate(-0.5turn);}
  100% {transform: translateX(450px) rotate(2turn);}
}




 As a side note, it’s also possible to have the target of your animation stay in place during an animation-delay by not including a 0% (or from) keyframe. The browser will use the styles already applied to your target as the starting keyframe of your animation in place of the missing initial keyframe, and therefore hold your target element in place during a delay. That may not always be feasible depending on your project’s set-up, but it’s another option. Having options is always good!

 

animation-fill-mode: both

There is also the option of both, which, just like its name implies, combines the behaviour of both the forwards and backwards fill modes. The target of your animation will take on the styles of your first keyframe before the animation starts. Then, when the animation completes, it will maintain the styling from the last keyframe to be executed.
Back to our example. We’ll use both in this case so that our ball will take the styles defined in our first keyframe before it starts, and will maintain the styles from our last keyframe once it has completed.

animation-fill-mode: both;

Our final CSS now looks like this:

 

.ball {
animation-name: ballmove;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-delay: 1s;
animation-fill-mode: both;
}

@keyframes ballmove {
0% {transform: translateX(100px) rotate(0);}
20% {transform: translateX(-10px) rotate(-0.5turn);}
100% {transform: translateX(450px) rotate(2turn);}
}

HTML

<img class="ball" src="../ball.png" alt="ball"width="100" height="100" />